<template>
	<view class="boxhead">
		<view class="boxtop">
			<text class="text">新增商品</text>
		</view>
		<view class="imgbox">
			<text class="text">设置图片:</text>
			<image  @click="btnimg" class="image" :src="src"></image>
		</view>
		<view class="boxcent">
			<view class="box1">
				<text class="text">商品名称:</text>
				<input type="text" class="text1" v-model="name" placeholder="请输入商品名称">
			</view>
			<view class="br"></view>
			<view class="box1">
				<text class="text">商品规格:</text>
				<input type="text" class="text1" v-model="spe" placeholder="请输入商品规格">
			</view>
			<view class="br"></view>
			<view class="box1">
				<text class="text">商品数量:</text>
				<input type="number" class="text1" v-model="num" placeholder="请输入商品数量">
			</view>
			<view class="br"></view>
			<view class="box1">
				<text class="text">商品单位:</text>
				<input type="text" class="text1" v-model="unit" placeholder="请输入商品单位">
			</view>
			<view class="br"></view>
			<view class="box1">
				<text class="text">所在仓库:</text>
				<select v-model="wid">
					<option disabled value="">请选择所在仓库</option>
					<option v-for="dept in option" :key="dept.wid" :value="dept.wid">编号:{{dept.wid}}&ensp;名称:{{dept.wname}}</option>
				</select>
				<!-- <input type="text" class="text1" v-model="wid" placeholder="请输入所在仓库"> -->
			</view>
			<view class="br"></view>
			<view class="box1">
				<text class="text">供应商id:</text>
				<select v-model="supplier_id">
					<option disabled value="">请选择供应商编号</option>
					<option v-for="dept in options" :key="dept.id" :value="dept.id">编号:{{dept.id}}&ensp;名称:{{dept.name}}</option>
				</select>
			</view>
			<view class="br"></view>
			<view class="box1">
				<text class="text">进价:</text>
				<input type="number" class="text1" v-model="purchase_price" placeholder="请输入进价">
			</view>
			<view class="br"></view>
			<view class="box1">
				<text class="text">售价:</text>
				<input type="number" class="text1" v-model="retail_price" placeholder="请输入售价">
			</view>
		</view>
		<view class="boxhead">
			<uni-collapse  ref="collapse">
				<uni-collapse-item  title="其他信息">
					<view class="box"> 
						<view class="box1">
							<text class="text">报警数量:</text>
							<input type="text" class="text1" v-model="alarmnum" placeholder="请输入报警数量">
						</view>
						<view class="br"></view>
						<view class="box1">
							<text class="text">生产日期:</text>
							<view class="datetime">
								<uni-datetime-picker type="date" @change="produc" v-model="production"></uni-datetime-picker>
							</view>
						</view>
						<view class="br"></view>
						<view class="box1">
							<text class="text">保质日期:</text>
							<view class="datetime">
								<uni-datetime-picker type="date" @change="expira" v-model="expiration"></uni-datetime-picker>
							</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
		<view class="boxbtn">
			<button @click="back" class="btn">取消</button>
			<button @click="addnew" class="btn1">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				option:{},options:{},
				src:'http://localhost:3000/static/upload/63b5f47c48c132eaced5f5888f47727a.png',
				name:'',spe:'',num:'',wid:'',alarmnum:'',production:'2000-01-01',expiration:'2000-01-01',supplier_id:'',
				purchase_price:'',retail_price:'',unit:''
			}
		},
		onLoad() {
			this.getdata()
		},
		methods: {
			async getdata(){
				const res = await this.Request({
					url:'api/supplie/sup_getdata'
				})
				this.options = res.data
				const res1 = await this.Request({
					url:'api/warehouse/war_getonedata'
				})
				this.option = res1.data
			},
			produc(e) {
				this.production= e
			},
			expira(e) {
				this.expiration= e
			},
			async btnimg(){
				const res = await this.Upload({
					url:'api/upload/postimage'
				});
				this.src=  res.data.slice(8,80)
			},
			back(){
				uni.showModal({
					title: '提示',
					content: '是否结束此操作',
					success: function (res) {
						if (res.confirm) {
							uni.reLaunch({
								url:'/pages/super/sup-commodity/sup-commodity'
							})
						}
					}
				});
			},
			async addnew(){
				if(this.name.replace(/\s*/g,"").length == 0 || this.supplier_id == '' ||
				   this.wid == '' || this.spe.replace(/\s*/g,"").length == 0 ||
				   this.num.replace(/\s*/g,"").length == 0 || 
				   this.purchase_price.replace(/\s*/g,"").length == 0 ||
				   this.retail_price.replace(/\s*/g,"").length == 0 ||
				   this.alarmnum .replace(/\s*/g,"").length == 0
				   ){
					uni.showToast({
						icon:"error",
						title:'请填写所有内容'
					})
				}  else {
					const res = await this.Request({
						url:'/api/stock/stockadd',
						method:'PUT',
						data:{img:this.src,name:this.name,spe:this.spe,num:this.num,
						wid:this.wid,alarmnum:this.alarmnum,production_date:this.production,expiration_date:this.expiration,
						supplier_id:this.supplier_id,purchase_price:this.purchase_price,retail_price:this.retail_price,unit:this.unit}
					})
					if(res.data.affectedRows=1){
						uni.showToast({
							title: '添加成功'
						})
						setTimeout(() => {
							uni.reLaunch({
								url:'/pages/super/sup-commodity/sup-commodity'
							})
						},500)
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.imgbox{
		display: flex;
		height: 80px;
		margin-top: 10px;
		border-top: 2px solid #ccc;
		border-bottom: 2px solid #ccc;
		border-radius: 10px;
		.text{
			margin: auto 0;
			margin-left: 28px;
			font-weight: 600;
			font-size: 110%;
		}
		.image{
			margin: auto 0;
			margin-left: 100px;
			height: 60px;
			width: 60px;
		}
	}
	.boxcent{
		margin-top: 10px;
		border-top: 2px solid #ccc;
		border-bottom: 2px solid #ccc;
		border-radius: 10px;
		.br{
			height: 1px;
			margin-left: 28px;
			background: #a5a5a5;
		}
		.box1{
			display: flex;
			margin-top: 10px;
			margin-bottom: 10px;
			select{
				height: 30px;
				margin: 2px 0 2px 65px;
				width: 50%;
				border-radius: 10px;
			}
			.text{
				margin: auto 0;
				margin-left: 28px;
				font-weight: 600;
				font-size: 110%;
			}
			.text1{
				margin-left: 105px;
			}
		}
	}
	.boxhead{
		margin-top: 10px;
		.boxtop{
			width: 100%;
			background-color: #efefef;
			display: flex;
			border-bottom: 1px solid #ccc;
			.text{
				margin: 5px 0 5px 5px;
				font-size: 110%;
				font-weight: 700;
				color: #d3d3d3;
			}
		}
		.box{
			border-top: 2px solid #ccc;
			border-bottom: 2px solid #ccc;
			border-radius: 10px;
			.br{
				height: 1px;
				margin-left: 10%;
				background: #a5a5a5;
			}
			.box1{
				display: flex;
				margin-top: 10px;
				margin-bottom: 10px;
				.datetime{
					width: 180px;
					margin-left: 50px;
				}
				.text{
					margin: auto 0;
					margin-left: 30px;
					font-weight: 600;
					font-size: 110%;
				}
				.text1{
					margin-left: 105px;
				}
			}
		}
	}
	.boxbtn{
		display: flex;
		margin-top: 20px;
		.btn{
			width: 100px;
			margin-left: 80px;	
		}
		.btn1{
			width: 100px;
			margin-left: -70px;
		}
	}
</style>
